<html>
  <head>
    <title></title>
    <style>

    html { background: #444; color:#ddd; }

    body { flow:horizontal; }
    body > aside { 
      width:300dip; height:*; flow:vertical; 
    }
    
    div#printers 
    { 
      behavior:form;
      height:*;
      max-height:max-content; 
      width:max-content; 
      max-width:100%;
      margin:1em *;
      overflow:scroll-indicator;
    }
    div#printers > button {
      display:block;
      white-space: normal;
      width:*;
    }

    body > aside > button {
       display:block;
       font:inherit;
       padding: 1em 2em;
       height:1.2em;
       margin:0 *;
    }

    body > div { width:*; height:*; }

    body > div > header { flow:horizontal; border-spacing:0.25em; vertical-align:middle; horizontal-align:center; }

    body > div > header > input { font:inherit; background:transparent; border:none;  color:#fff;  }
    
    frame { background:none; prototype: Pager url(pager.js); }

    frame > pagebox {
      background-color:white;
      box-shadow: none;
    }

    </style>
    
  </head>
<body>
  <aside>
    <header>Printer:</header>
    <div #printers></div>
    <button #print>Print</button>
  </aside>
  <div>
    <header><span>Page</span><input|integer #current-page value=1 step=1 min=1 max=1>
            <span>of pages:</span><output|integer #numpages />
            <close-button #close-overlay/>
    </header>
    <frame|pager cols=1 page-template="page-template.htm" content-style="print.css" />
  </div>
</body>
</html>
